<template>
<!--外面大盒子 -->
   <div class="container">
   <!-- 左面 -->
   <div>
     <h3>输入搜索<el-input placeholder="请输入用户昵称或手机号....." v-model="username" clearable style="height:35px"> </el-input></h3>
   </div>
   <!-- 中间 -->
    <div style="margin-left:20px">
     <h3>下单时间<el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="——"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </h3>
  </div>

   <!-- 右面   @click="searchFun"    @click="batchDeletFun"-->

   <div>
     <el-button type="primary" @click="searchFun">查询</el-button>
     <el-button >重置</el-button>
   </div>
       
  </div>
</template>

<script>
export default {
     data(){
      return {
        username: '',  //输入框
        //日期
        pickerOptions: {
          shortcuts: [{
          //   text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      value1: '',
     }
     },
     methods:{
      //  搜索事件
      // searchFun(){
      //   // 自调父
      //   this.$emit('parentsearchFun',this.username)
      // },

     }
     
}
</script>

<style lang='less' scoped>
.container{
  display:flex;
  justify-content: left;
  align-content:center;
  height: 60px;
  line-height:60px;
  width:100%;
  background: #D4E0F6;
  padding-left:20px;
  margin-top:20px;
  .el-input{
    width: 200px;
    margin-right:20px;

  }
  //第一个
.el-input--mini .el-input__inner {
    height: 35px;
    line-height: 35px;
    margin-left: 10px !important; 
}
// 第二个
.el-range-editor--mini.el-input__inner {
    height: 35px;
    margin-left: 20px;
}
  .el-button--mini, .el-button--small {
    font-size: 15px;
   font-weight: 900;
  height: 32px;
    width: 80px;
    margin-left: 30px;
    }

}


</style>